<template>
  <div class="page">
    <!-- 搜索区域 开始 -->
    <div class="el_card_box">
      <el-form :inline="true" size="small" :model="formInline" class="search_form">
        <el-form-item label="预约时间：">
          <el-date-picker v-model="formInline.orderTime" type="daterange" unlink-panels :picker-options="pickerOptions"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item label="反馈时间：">
          <el-date-picker v-model="formInline.feedbackTime" type="daterange" unlink-panels :picker-options="pickerOptions"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item label="城市：">
          <city-select v-model="formInline.cities" />
        </el-form-item>
        <el-form-item label="预约医院：">
          <hospital-select v-model="formInline.hospitals" />
        </el-form-item>
        <el-form-item label="负责人：">
          <user-select v-model="formInline.principals" />
        </el-form-item>
        <el-form-item label="是否到店：">
          <el-select v-model="formInline.arrivedStatus" clearable>
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否成交：">
          <el-select v-model="formInline.dealStatus" clearable>
            <el-option label="是" value="8" />
            <el-option label="否" value="7" />
          </el-select>
        </el-form-item>
        <el-form-item label="跟进分工：">
          <el-select v-model="formInline.ofbStatus" clearable>
            <el-option label="门诊跟进" value="1" />
            <el-option label="平台跟进" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="结算状态：">
          <el-select v-model="formInline.settleStatus" clearable>
            <el-option label="未结算" value="0" />
            <el-option label="已结算" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="成交金额：">
          <el-select v-model="formInline.dealAmount" clearable>
            <el-option label="大于0" value="1" />
            <el-option label="小于0" value="-1" />
          </el-select>
        </el-form-item>
        <el-form-item label="收款金额：">
          <el-select v-model="formInline.collectMoney" clearable>
            <el-option label="大于0" value="1" />
            <el-option label="小于0" value="-1" />
          </el-select>
        </el-form-item>
        <el-form-item label="反馈类型：">
          <el-select v-model="formInline.feedbackType" clearable>
            <el-option label="正常客户" value="1" />
            <el-option label="其他到店客户" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="关键词：">
          <el-input v-model="formInline.term" placeholder="请输入客户姓名/电话" @keyup.enter.native="getList(1)" />
        </el-form-item>
      </el-form>
      <div class="search_btn_box">
        <el-button type="primary" size="small" @click="onSearch">筛选</el-button>
        <el-button type="default" size="small" @click="rest">清空筛选</el-button>
      </div>
    </div>
    <!-- 搜索区域 end -->

    <!-- 表格 开始 -->
    <div class="table_box">
      <!-- 操作区域 开始 -->
      <div class="action_box">
        <auth-button uid="1030601" type="default" size="small" :loading="eloading" @click.native="downloadExcel">筛选批量导出
        </auth-button>
      </div>
      <!-- 操作区域 end -->

      <el-table ref="elTable" class="el_table" size="small" :data="tableData">
        <el-table-column prop="channelName" label="客户信息" width="150px">
          <template slot-scope="{ row }">
            <tab-user :user="userFormatter(row)" />
          </template>
        </el-table-column>
        <el-table-column prop="hospitalName" label="预约医院" :width="longTdWidth" show-overflow-tooltip />
        <el-table-column prop="appointmentTime" label="预约时间" :width="tdWidth" show-overflow-tooltip>
          <template slot-scope="{ row }">{{
            showTime(row.appointmentTime)
          }}</template>
        </el-table-column>
        <el-table-column prop="principal" label="负责人" :width="sortTdWidth" show-overflow-tooltip />
        <el-table-column prop="feedbackTime" label="反馈时间" :width="tdWidth" show-overflow-tooltip />
        <el-table-column prop="arrivedStatusStr" label="是否到店" :width="sortTdWidth" show-overflow-tooltip />
        <el-table-column prop="dealStatusStr" label="是否成交" :width="sortTdWidth" show-overflow-tooltip />
        <el-table-column label="成交情况" :width="sortTdWidth" show-overflow-tooltip>
          <template slot-scope="{ row }">{{
            showDealInfo(row.feedbackDealCnt)
          }}</template>
        </el-table-column>
        <el-table-column prop="dealAmount" label="成交金额" :width="sortTdWidth" show-overflow-tooltip />
        <el-table-column prop="collectMoney" label="收款金额" :width="sortTdWidth" show-overflow-tooltip />
        <el-table-column prop="feedbackContent" label="反馈内容" :min-width="longTdWidth" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <div v-html="
              row.feedbackContent
                ? row.feedbackContent.replace(/\n/g, '<br/>')
                : ''
            " @click="copyLink(row)"></div>
          </template>
        </el-table-column>
        <el-table-column prop="furtherConsultTime" label="预计下次复诊" :width="tdWidth" show-overflow-tooltip />
        <el-table-column prop="oralCavityPics" label="口腔片" :width="tdWidth">
          <template slot-scope="{ row }">
            <gl-image :src="item" v-for="(item, index) in getImages(row.oralCavityPics)" :key="index" class="tab_img">
            </gl-image>
          </template>
        </el-table-column>
        <el-table-column prop="refundVoucher" label="退款凭证">
          <template slot-scope="{ row }">
            <gl-image :src="item" v-for="(item, index) in getImages(row.refundVoucher)" :key="index" class="tab_img">
            </gl-image>
          </template>
        </el-table-column>
        <el-table-column prop="followupPartyDesc" label="跟进分工" :width="tdWidth" show-overflow-tooltip />

        <el-table-column prop="feedbackPerson" label="反馈人" :width="sortTdWidth" show-overflow-tooltip />
        <el-table-column prop="settleStatusStr" label="结算状态" :width="sortTdWidth" show-overflow-tooltip />
        <el-table-column label="操作" fixed="right" width="200">
          <template slot-scope="{ row }">
            <auth-link type="primary" uid="1030602" @click="openDialog(row)"
              v-if="row.arrivedStatus == 1 && row.orderStatus != 8">更新成交
            </auth-link>
            <auth-link type="primary" uid="1030603" v-if="row.dealStatus == 8 && row.settleStatus == 0"
              @click="updateSettle(row)">更新结算</auth-link>
            <auth-link type="primary" uid="1030604" @click="editEvent(row.dealType == 6 ? 'refund' : 'update', row)">编辑
            </auth-link>
            <!-- <el-link type="primary" @click="openDialog(row)">更新成交</el-link> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination_list">
        <el-pagination background layout="sizes, total,prev, pager, next, jumper" :total="pageTotal" :page-size="pageSize"
          :page-sizes="pageSizes" :current-page.sync="pageNumber" @current-change="getList"
          @size-change="changePageSize" />
      </div>
    </div>
    <!-- 表格 end -->

    <!-- 更新成交 开始 -->
    <shop-update v-model="showDialog" :info="customerInfo" v-if="showDialog"></shop-update>
    <!-- 更新成交 end -->

    <!-- 更新结算 开始 -->
    <update-settle v-model="showSettleDialog" :info="customerInfo" v-if="showSettleDialog"></update-settle>
    <!-- 更新结算 end -->

    <!-- 更新反馈 开始 -->
    <update-feedback v-model="showFeedbackDialog" :classify="classify" :feedbackId="feedbackId" @change="onSettleChange"
      v-if="showFeedbackDialog"></update-feedback>
    <!-- 更新反馈 end -->
  </div>
</template>

<script>
import { GET_OFEEDBACK_RECORD, GET_OFEEDBACK_EXPORT } from "@/http/book";
import { showToast, showModal, deepClone, broadcast } from "@/common/util";
import moment from "moment";
import { HOSPITALFEEDBACKSTATUS } from "@/common/constants";
import { systemToDoShortcuts } from "@/common/date";
import ShopUpdate from "./shopUpdate.vue";
import UpdateSettle from "./updateSettlement.vue";
import UpdateFeedback from "./updateFeedback.vue";
import { BASEURL } from "@/http/interface";
export default {
  components: {
    ShopUpdate,
    UpdateSettle,
    UpdateFeedback,
  },
  data() {
    return {
      formInline: {},
      tableData: [],
      pageTotal: 0,
      pageNumber: 1,
      pageSizes: [10, 20, 50, 100],
      pageSize: 20,
      eloading: false,
      showDialog: false,
      loading: false,
      pickerOptions: {
        shortcuts: systemToDoShortcuts,
      },
      HOSPITALFEEDBACKSTATUS,
      tdWidth: 120,
      sortTdWidth: 80,
      longTdWidth: 220,
      customerInfo: {},
      showSettleDialog: false,
      showFeedbackDialog: false,
      feedbackId: "",
      classify: "",
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    /** 重置 */
    rest() {
      this.formInline = {};
      this.getList();
    },

    /** 每页展示 */
    changePageSize(e) {
      this.pageSize = e;
      this.getList();
    },

    /** 获取参数 */
    getParams() {
      let oParams = deepClone(this.formInline);
      let n = oParams.orderTime || [];
      let m = oParams.feedbackTime || [];

      if (n && n.length) {
        oParams.orderStartTime = n[0];
        oParams.orderEndTime = n[1];
      }

      if (m && m.length) {
        oParams.feedbackStartTime = m[0];
        oParams.feedbackEndTime = m[1];
      }

      delete oParams.orderTime;
      delete oParams.feedbackTime;

      oParams.pageNumber = this.pageNumber;
      oParams.pageSize = this.pageSize;
      return oParams;
    },

    /** 获取列表 */
    getList() {
      const _this = this;
      const oParams = this.getParams();
      GET_OFEEDBACK_RECORD(oParams).then((res) => {
        const obj = res.data || {};
        _this.tableData = obj.list || [];
        _this.pageTotal = obj.totalElements;
      });
    },

    // 格式化处理用户信息
    userFormatter(row) {
      const o = deepClone(row);
      o.customerName = o.name;
      o.customerPhone = o.phone;
      o.id = o.clueId;
      return o;
    },

    // 格式化展示时间
    showTime(str) {
      if (!str) {
        return "";
      }
      return moment(str).format("yyyy-MM-DD HH:mm");
    },

    // 更新成交
    openDialog(row) {
      // 更新过，打开收款变动、其他反馈记录更新过
      if (row.dealCnt > 1 || row.feedbackDealCnt > 0) {
        broadcast("customer.collect.add", {
          customerId: row.customerId,
          info: { remark: row.feedbackContent },
        });
        return false;
      }

      // 判断该预约是首次成交还是收款变动更新尾款，如果该预约未更新过，跳转到预约更新
      if (row.feedbackDealCnt == 0 && row.dealCnt == 0) {
        this.showDialog = true;
        this.customerInfo = row;
        return false;
      }

      // 预约-待到店
      if (row.orderStatus == 5) {
        this.showDialog = true;
        this.customerInfo = row;
        return false;
      }

      // 如果成交、预约状态为待到店
      if (row.dealStatus == 8 && row.orderStatus == 5) {
        this.showDialog = true;
        this.customerInfo = row;
        return false;
      }

      showToast({
        message: "该预约已更新",
      });
    },

    // 编辑反馈
    editEvent(type, row) {
      if (row.id) {
        this.feedbackId = row.id;
      }
      this.classify = type;
      this.showFeedbackDialog = true;
    },

    // 导出excel
    downloadExcel() {
      let _this = this;
      let o = deepClone(_this.formInline);
      let m = Object.keys(o);
      if (m.length > 0) {
        showModal({
          message: "确定是否导出筛选条件下面所有反馈记录列表?",
          showCancelButton: true,
          type: "warning",
          success: function () {
            _this.dowloadExcelFile();
          },
        });
        return false;
      }
      showToast({
        message: "请选择筛选条件后再导出",
      });
      //_this.dowloadExcelFile();
    },

    // 下载excel
    dowloadExcelFile() {
      let _this = this;
      let oParams = _this.getParams();
      let options = {};

      delete oParams.pageNumber;
      delete oParams.pageSize;

      options.method = "GET";
      options.data = oParams;
      options.url = GET_OFEEDBACK_EXPORT;
      options.fileName = "反馈记录列表.xlsx";
      _this.eloading = true;
      _this.$exportExcel(options).then((res) => {
        _this.eloading = false;
      });
    },

    // 更新结算
    updateSettle(row) {
      this.settleId = row.id;
      this.customerInfo = row;
      this.showSettleDialog = true;
    },

    // 监听更新结算
    onSettleChange(e) {
      if (e) {
        this.getList();
      }
    },

    // 获取展示图片
    getImages(str) {
      if (!str) {
        return [];
      }
      let list = str.split(",");
      let arr = [];
      list.map((k) => {
        arr.push(`${BASEURL}${k}`);
      });
      return arr;
    },

    // 搜索
    onSearch() {
      this.pageNumber = 1;
      this.getList();
    },

    // 复制链接
    copyLink(row) {
      let m = deepClone(row)
      let input = document.createElement("textarea");
      input.value = m.feedbackContent.replace(/\n/g, String.fromCharCode(10));
      document.body.append(input);
      input.select();
      document.execCommand("copy");
      showToast({
        message: "复制成功",
        type: "success",
      });
      if (input) {
        document.body.removeChild(input);
      }
    },

    // 成交情况
    showDealInfo(num) {
      if (!num) {
        return "";
      }
      if (num == 1) {
        return "首次成交";
      }
      if (num > 1) {
        return "再次情况";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/style/customer/index.scss";

.tab_img {
  width: 30px;
  height: 30px;
  margin: 2px;
}
</style>
